<template>
<div>
  <V-CommonHeaderLeft>
    <div id="app">
    <el-row>
      <!-- 头部 -->
      <div class="header">
        <el-col :span="5" class="header-nav">
          <router-link to="/">首页&nbsp;&nbsp;/</router-link>
          <router-link to="/">商城&nbsp;&nbsp;/</router-link>
          <router-link to="/">通知公告&nbsp;&nbsp;/</router-link>
          <router-link to="/">新通知公告</router-link>
        </el-col>
        <el-col :span="1" :offset="17" class="header-img">
          <!-- <img src="" alt=""> -->
        </el-col>
      </div>
    </el-row>
    <div class="contents">
      <div class="contents-header">
        <p>基本信息</p>
        <p>
          <span>(</span>
          <span>*</span>
          <span>必填)</span>
        </p>
      </div>
      <div class="contents-center">
        <el-row>
          <el-col :span="1" style="margin-top:10px">公告标题</el-col>
          <el-col :span="1" style="padding-left:10px">
            <el-input v-model="input" placeholder="请输入公告标题" class="title"></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="1" style="margin-top:20px">公告内容</el-col>
          <el-col :span="22" style="margin:20px 0px 0px 10px;">
            <TinymceText id="tinymce" @release="release"></TinymceText>
          </el-col>
        </el-row>
      </div>
      <div class="fuInfo">
        <div class="fuInfo-header">
          <p>|附件</p>
          <p>(支持jpg、png、PDF、Word、Excel)</p>
        </div>
        <div class="fuInfo-center">
          <div class="upload">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              multiple="true"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-one"></div>
      <div class="footer-two">
        <router-link to="/">取消</router-link>
        <router-link to="/">保存</router-link>
      </div>
    </div>
  </div>
  </V-CommonHeaderLeft>
</div>
</template>

<script>
import TinymceText from './../../components/common/edit/Edit'
import VCommonHeaderLeft from './../common/vCommonHeaderLeft/VCommonHeaderLeft'
export default {
  name: 'marketingOrder',
  data () {
    return {
      input: '',
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    release (content) {
      // console.log(content)
    },
    handleRemove (file, fileList) {
      // console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  },
  components: {
    TinymceText,
    VCommonHeaderLeft
  }

}
</script>

<style scoped lang="scss">
#app {
  width:100%;
  background-color: #f2f5f7;
  height: 100%;
  padding: 10px 10px 0px 10px;
  .header {
    height: 45px;
    .header-nav {
      line-height: 30px;
      font-size: 12px;
      display: flex;
      justify-content: space-around;
      padding-left: 10px;
      span {
        display: inline-block;
        margin-left: 10px;
      }
      a {
        color: #999999;
      }
      a:hover {
        color: #20ade5;
      }
    }
    .header-img {
      width: 25px;
      height: 25px;
      border-radius: 5px;
      border: 1px solid #dce4e7;
    }
  }
}
.header-nav a:last-child {
  color: #333 !important;
}
.header-nav a:last-child:hover {
  color: #333 !important;
}
.contents {
  padding: 15px 0px 0px 25px;
  background-color: #fff;
  font-size: 12px;
  height: 435px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.contents-header {
  display: flex;
  border-bottom: 1px solid #e3e3e3;
  padding: 0px 0px 10px 0px;
  margin-right: 20px;
}
.contents-header p:nth-child(1) {
  font-size: 18px;
  color: #333;
}
.contents-header p:nth-child(2) {
  margin: 8px 0px 0px 10px;
}
.contents-header p:nth-child(2) span {
  font-size: 12px;
  color: #b3b3b3;
  margin: 0px 1px;
  display: inline-block;
}
.contents-header p:nth-child(2) span:nth-child(2) {
  color: #ff3838;
}
.title {
  width: 500px;
}
.contents-center {
  padding: 15px 0px 0px 20px;
}
.fuInfo {
  margin-top: 65px;
}
.fuInfo-header {
  display: flex;
  border-bottom: 1px solid #e3e3e3;
  margin: 0px 20px 0px 10px;
  padding-bottom: 10px;
}
.fuInfo-header p:nth-child(1) {
  font-size: 18px;
  font-weight: 15;
}
.fuInfo-header p:nth-child(2) {
  color: #b3b3b3;
  font-size: 12px;
  margin: 10px 0px 0px 5px;
}
.fuInfo-center {
  height: 200px;
}
.upload {
  padding: 10px 0px 0px 15px;
}
.footer {
  background-color: #fff;
  padding: 20px 0px 0px 0px;
  height: 70px;
}
.footer-one {
  padding-top: 10px;
  border-top: 1px solid #e3e3e3;
}
.footer-two {
  display: flex;
  margin-left: 70%;
}
.footer-two a {
  display: block;
  width: 150px;
  height: 40px;
  color: #37b5e8;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
}
.footer-two a:nth-child(1) {
  border: 1px solid;
}
.footer-two a:nth-child(2) {
  background-color: #37b5e8;
  color: #fff;
  margin-left: 10px;
}
</style>
